<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav-container a {
            transition: background-color 0.3s;
        }

        .l1 {
            background-color: red;
        }

        .r1 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="nav-container">
        <a class="l1" id="over_a1" href="#">分类导航</a>
        <a class="r1" id="over_a2" href="#">快速链接</a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const l1 = document.querySelector('.l1');
            const r1 = document.querySelector('.r1');

            // 获取初始颜色
            const initialL1Color = window.getComputedStyle(l1).backgroundColor;
            const initialR1Color = window.getComputedStyle(r1).backgroundColor;
            console.log(initialL1Color);

            let swapped = false;

            function swapColors() {
                if (swapped) {
                    l1.style.setProperty('background-color', initialL1Color, 'important');
                    r1.style.backgroundColor = initialR1Color;
                } else {
                    l1.style.backgroundColor = initialR1Color;
                    r1.style.setProperty('background-color', initialL1Color, 'important');
                }
                swapped = !swapped;
            }

            l1.addEventListener('mouseover', swapColors);
            r1.addEventListener('mouseover', swapColors);
        });
    </script>
</body>

</html>